<template>
  <el-row :gutter="20"
          id="designProductConsStyle">
    <el-form :model="requestParams"
             label-width="150px"
             ref="form"
             :rules="rules"
             :disabled="todos==3?true:false">
      <el-col :span="24">
        <el-form-item label="项目名称:"
                      size="medium"
                      :prop="todos==3?'':'project_name'">
          <el-input v-model="requestParams.project_name"
                    size="medium"
                    placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="项目编号:"
                      size="medium"
                      :prop="todos==3?'':'code'">
          <el-input v-model="requestParams.code"
                    size="medium"
                    placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="负责人:"
                      size="medium"
                      :prop="todos==3?'':'zrr'">
          <el-input v-model="requestParams.zrr"
                    size="medium"
                    placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="联系方式:"
                      size="medium"
                      :prop="todos==3?'':'phone'">
          <el-input v-model="requestParams.phone"
                    size="medium"
                    placeholder="请输入"
                    :maxlength="11"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="预制率(%):"
                      size="medium">
          <el-input-number v-model="requestParams.pre_rate"
                           controls-position="right"
                           size="medium"
                           placeholder="请输入"
                           :precision="2"
                           :step="0.1"
                           :min="0"
                           :max="100"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="结构类型:"
                      size="medium"
                      :prop="todos==3?'':'struct_type'">
          <el-input v-model="requestParams.struct_type"
                    size="medium"
                    placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="专业类型:"
                      size="medium"
                      :prop="todos==3?'':'major_type'">
          <el-select v-model="requestParams.major_type"
                     filterable
                     placeholder="请选择"
                     size="medium"
                     class="select-style">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="构件生产单位:"
                      size="medium"
                      :prop="todos==3?'':'cop_org'">
          <el-select v-model="requestParams.cop_org"
                     filterable
                     placeholder="请选择"
                     clearable
                     class="select-style">
            <el-option v-for="item in designArr"
                       :key="item.jt_org_id"
                       :label="item.org_name"
                       :value="item.jt_org_id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="构件总数(个):"
                      size="medium"
                      :prop="todos==3?'':'cop_num'">
          <el-input-number v-model="requestParams.cop_num"
                           controls-position="right"
                           size="medium"
                           placeholder="请输入构件总数(个)"
                           :precision="0"
                           :step="1"
                           :min="0"
                           :max="10000"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="构件总方量(m³):"
                      size="medium"
                      :prop="todos==3?'':'cop_vol'">
          <el-input-number v-model="requestParams.cop_vol"
                           controls-position="right"
                           size="medium"
                           placeholder="请输入构件总方量(m³)"
                           :precision="2"
                           :step="0.1"
                           :min="0"
                           :max="1000000"></el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="构件现场场布图:"
                      size="medium"
                      :prop="todos==3?'':'cop_img'">
          <el-upload class="avatar-uploader"
                     action=""
                     accept=".png,.jpeg,jpg"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :http-request="uploadProjectImg">
            <img v-if="requestParams.cop_img"
                 :src="requestParams.cop_img"
                 class="avatar">
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="时间:"
                      size="medium"
                      :prop="todos==3?'':'add_time'">
          <el-date-picker v-model="requestParams.add_time"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="24"
              class="bottom-box"
              v-show="todos==3?false:true">
        <el-button size="medium"
                   @click="onCancel">取消</el-button>
        <el-button type="primary"
                   size="medium"
                   @click="onSure('form')">确定</el-button>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
import moment from 'moment'
import { DesignManageApi, ConstrucManagementApi } from '@/services/WorkCenter'
import { standardCodeApi } from '@/services/StandardCode'
import { UploadFileApi } from '@/services/UserPermission'
export default {
  props: {
    todos: Number,
    catchBack: Function,
    catchSave: Function,
    detailObj: Object
  },
  data () {
    return {
      imageUrl: '',
      designArr: [],
      options: [],
      requestParams: {
        project_name: '',
        code: '',
        zrr: '',
        phone: '',
        pre_rate: '',
        struct_type: '',
        major_type: '',
        cop_org: '',
        cop_num: '',
        cop_vol: '',
        cop_img: '',
        // business_type:1//1:工业化设计管理；2：工业化生产管理；3：工业化施工管理
      },
      rules: {
        project_name: [
          { required: true, message: '项目名称不能为空', trigger: 'change' }
        ],
        code: [
          { required: true, message: '项目编号不能为空', trigger: 'change' }
        ],
        zrr: [
          { required: true, message: '责任人不能为空', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '联系方式不能为空', trigger: 'change' },
          { pattern: /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/, message: '请您输入有效的联系方式' }

        ],
        struct_type: [
          { required: true, message: '结构类型不能为空', trigger: 'change' }
        ],
        major_type: [
          { required: true, message: '专业类型不能为空', trigger: 'change' }
        ],
        cop_org: [
          { required: true, message: '构件生产单位不能为空', trigger: 'change' }
        ],
        cop_num: [
          { required: true, message: '构件总数(个)不能为空', trigger: 'change' }
        ],
        cop_vol: [
          { required: true, message: '构件总方量（m³）不能为空', trigger: 'change' }
        ],
        cop_img: [{
          required: true, message: '构件现场场布图不能为空', trigger: 'change'
        }],
        add_time: [
          { required: true, message: '创建日期不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 上传项目图片
    uploadProjectImg (file) {
      let formData = new FormData()
      formData.append('module', 'industry')
      formData.append('pic_file_apk', file.file)
      UploadFileApi.uploadFile({
        data: formData
      }).then((res) => {
        if (res.code == 0) {
          this.requestParams.cop_img = res.data.file_path
          console.log('requestParams.cop_img=', this.requestParams.cop_img, 'res.data.file_path=', res.data.file_path)
        }

      })
    },
    // 图片上传功能
    handleAvatarSuccess (res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw)
    },
    handleChange (value) {
      console.log(value);
    },
    //取消
    onCancel () {
      this.$refs['form'].resetFields();
      this.catchBack();
    },
    //确定
    onSure (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          if (this.todos == 2) {
            this.requestParams.id = this.requestParams.jt_project_id;
            ConstrucManagementApi.editProject({
              data: this.requestParams
            }).then((res) => {
              if (res.code == 0) {
                this.catchSave();
                this.$message.success('操作成功')
              }
            }).catch((error) => {
              console.log(error)
            })
          }
        } else {
          console.log('error')
        }
      })
    },
    getProDetail () {//详情
      return ConstrucManagementApi.detailConsProject({
        params: {
          id: this.detailObj.jt_project_id,
        }
      }).then((res) => {
        this.requestParams = res.data;
        this.requestParams.major_type = String(this.requestParams.major_type)
        this.requestParams.cop_org = Number(this.requestParams.cop_org);
        // this.requestParams.struct_type=String(this.requestParams.struct_type);
        console.log('详情requestParams=', this.requestParams, 'this.designArr=', this.designArr)
      }).catch((error) => {
        console.log(error)
      })
    },
    getOrgList () {//获取组织下拉列表
      return DesignManageApi.getOrgList({
        params: {
          // type:3,//1设计，2生产，3施工
          list_or_tree: 'list'//获取list或者tree
        }
      }).then((res) => {
        this.designArr = [];
        this.designArr = res.data.list;
      }).catch((error) => {
        console.log(error)
      })
    },
    getStandardData () {//标准码
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'jtStructName'
        }
      }).then((res) => {
        this.options = res.data.list;
        console.log('标准码res=', res)
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  watch: {//监听
    todos (n, o) {
      if (n == 0) {
        this.requestParams.add_time = moment().format('YYYY-MM-DD:HH:MM:SS');//获取当前系统时间
        this.$refs['form'].resetFields();
      } else {
        this.getStandardData();//标准码
        this.getOrgList();//设计组织下拉数据
      }
      if (n == 2 | n == 3) {
        this.getProDetail()
      }
      console.log('watch-todos=', n, 'this.requestParams=', this.requestParams)
    }
  },
  async created () {
    this.requestParams.add_time = moment().format('YYYY-MM-DD:HH:MM:SS');//获取当前系统时间
    await this.getStandardData();//获取装配式结构类型
    await this.getOrgList();//获取组织下拉列表
    if (this.todos == 2 | this.todos == 3) {
      await this.getProDetail();//获取详情数据
    }
    console.log('created-todos=', this.todos, 'this.requestParams=', this.requestParams)
  }
}
</script>

<style lang="scss" scoped>
.bottom-box {
  text-align: right;
  margin-top: 4px;
}
.select-style {
  width: 100% !important;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>